import React from 'react';
import { Link } from 'react-router';
import { Breadcrumb, Button, Form, Input, Table, Row, Col, Select, Pagination, } from 'antd';
import ModalBox from './modalBox'
const FormItem = Form.Item;
const Option = Select.Option;


let List = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    getInitialState() {
        return {
            data: [],
            pagination: {
                current: 1,
                pageSize: 10
            },
            isShared: '',
            status: '',
            visible: false,
            renterInfoData: []
        }
    },

    componentDidMount() {
        this.handleSearch();
    },


    handleSearch() {
        this.setState({
          pagination: {
            current: 1
          }
        })
         this.fetch();
    },


     fetch() {
        let forms = this.props.form.getFieldsValue();
        let page = this.state.pagination.current;
        // console.log(forms);
        let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms)
        let _me = this
        Utils.sendAjax({
            url: '/statistic/renter',
            data: JSON.stringify(params),
            callback: function (result) {
                if (result.code == '200') {
                    _me.setState({
                        data: result.data,
                        pagination: result.page
                    })
                }
            }
        })
     },

    rowKey(data) {
        // console.log(data);
        return data.id;
    },

    handleTableChange(pagination) {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager
        });
        this.fetch();
    },

    handleReset() {
        this.props.form.resetFields();
    },
    // 打开弹框
    showModal(params) {
        this.resetState({visible: params.visible});
        this.getRenterInfo(params.id);
    },
    // 获取租客信息
    getRenterInfo (id) {
        
        let params = {rentContractRoomId: id }
        console.log('111');
        Utils.sendAjax({
            url: '/room/renter/list',
            data: JSON.stringify(params),
            callback: (result) => {
                if (result.code == '200') {
                    this.setState({
                        renterInfoData: result.data
                    })
                }else {
                    this.setState({
                        renterInfoData: []
                    })
                }
            }
        })   

        // let result = {
        //     "message": "操作成功",
        //     "data": [
        //         {
        //             "backPic": {
        //                 "bankCardId": 0,
        //                 "createTime": "2017-08-17 04:15:15",
        //                 "financeId": 0,
        //                 "id": 265,
        //                 "remark": "back",
        //                 "rentContractId": 63,
        //                 "renterId": 4,
        //                 "roomId": 0,
        //                 "roomInstallmentId": 0,
        //                 "tenementId": 0,
        //                 "type": "card",
        //                 "url": "444"
        //             },
        //             "frontPic": {
        //                 "bankCardId": 0,
        //                 "createTime": "2017-08-17 04:15:15",
        //                 "financeId": 0,
        //                 "id": 264,
        //                 "remark": "front",
        //                 "rentContractId": 63,
        //                 "renterId": 4,
        //                 "roomId": 0,
        //                 "roomInstallmentId": 0,
        //                 "tenementId": 0,
        //                 "type": "card",
        //                 "url": "333"
        //             },
        //             "renterAddress": "男",
        //             "renterCompany": "男",
        //             "renterName": "dasdasdas",
        //             "renterNo": "das",
        //             "renterPhone": "13588206295",
        //             "renterSex": "男"
        //         },
        //         {
        //             "backPic": {
        //                 "bankCardId": 0,
        //                 "createTime": "2017-08-17 04:15:15",
        //                 "financeId": 0,
        //                 "id": 263,
        //                 "remark": "back",
        //                 "rentContractId": 63,
        //                 "renterId": 1,
        //                 "roomId": 0,
        //                 "roomInstallmentId": 0,
        //                 "tenementId": 0,
        //                 "type": "card",
        //                 "url": "222"
        //             },
        //             "frontPic": {
        //                 "bankCardId": 0,
        //                 "createTime": "2017-08-17 04:15:15",
        //                 "financeId": 0,
        //                 "id": 262,
        //                 "remark": "front",
        //                 "rentContractId": 63,
        //                 "renterId": 1,
        //                 "roomId": 0,
        //                 "roomInstallmentId": 0,
        //                 "tenementId": 0,
        //                 "type": "card",
        //                 "url": "111"
        //             },
        //             "renterAddress": "男",
        //             "renterCompany": "男",
        //             "renterName": "dasdasdvbbbbbbbbbbbbbbbbbbbb",
        //             "renterNo": "dsadasdas",
        //             "renterPhone": "13588080475",
        //             "renterSex": "男"
        //         }
        //     ],
        //     "code": "200"
        // }
        //  this.setState({
        //     renterInfoData: result.data
        // })
    },
    // // 关闭弹框
    handleCancel() {
        
        this.setState({
            visible: false
        });
    },
    resetState (states) {
        this.setState(states);
    },
    render () {
        console.log(this.state.visible);
        const { getFieldProps } = this.props.form;


        const columns = [{
            title: '房源地址',
            dataIndex: 'address',
        }, {
            title: '房间名称',
            dataIndex: 'roomName',
        }, {
            title: '出租类型',
            dataIndex: 'isShared',
        }, {
            title: '租客姓名',
            dataIndex: 'renterName',
        }, {
            title: '租客性别',
            dataIndex: 'sex',
        }, {
            title: '联系电话',
            dataIndex: 'mobilePhone',
        }, {
            title: '身份证号码',
            dataIndex: 'cardNo',
        }, {
            title: '合同开始时间',
            dataIndex: 'startTime',
        }, {
            title: '合同到期时间',
            dataIndex: 'endTime',
        }, {
            title: '房间租金',
            dataIndex: 'rent',
        }, {
            title: '付款方式',
            render: (text, record) =>{
              return (
                <span>{`押${record.depositPeriod ? record.depositPeriod : 0}付${record.rentPeriod ? record.rentPeriod :0}`}</span>
              )
            }
        }, {
            title: '租房情况',
            width: 80,
            dataIndex: 'status',
        }, {
            title: '操作',
            width: 80,
            render: (text, record) => {
                return <a href="javascript:;" onClick={this.showModal.bind(this, {visible: true, id: record.id})}>查看租客</a>
            }
        }];

        let ModalBoxProps = {
            title: '租客信息',
            visible: this.state.visible,
            renterInfoData: this.state.renterInfoData,
            onCancel:this.handleCancel
        }
        return (

            <div>
                <div className="search-bar">
                    <Form inline>
                        <FormItem label="关键字">
                            <Input {...getFieldProps('keyWord') } placeholder="房间名/租客名"/>
                        </FormItem>
                         <FormItem  label="联系电话">
                            <Input {...getFieldProps('mobilePhone') } placeholder="联系电话"/>
                        </FormItem>
                        <FormItem label="出租类型">
                            <Select defaultValue="1" {...getFieldProps('isShared') } style={{width: 180}}>
                                <Option value="1">整租</Option>
                                <Option value="-1">单租</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="租房情况">
                            <Select  {...getFieldProps('status',{initialValue: ' '}) } style={{width: 180}}>
                                <Option value=" ">全部</Option>
                                <Option value="2">合约过期</Option>
                                <Option value="3">提前退租</Option>
                                <Option value="1">正常出租</Option>
                                <Option value="4">预订房间</Option>
                                <Option value="5">取消预订</Option>
                            </Select>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
                            <Button type="default" onClick={this.handleReset}>重置</Button>
                        </FormItem>
                    </Form>
                </div>
                { /*<Table dataSource={this.state.data} columns={columns} /> */}

               <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
                 onChange={this.handleTableChange}
                 pagination={this.state.pagination}/>
                 
                 <ModalBox {...ModalBoxProps}/>
            </div>


        );
    }
});

List = Form.create()(List);
export default List